<template>
  <div>
    <div id="title">意见管理</div>

    <div id="conditions">
      <div id="conditions-head">
        <i class="el-icon-search"></i>
        <span>筛选</span>
      </div>
      <el-form :inline="true" :model="conditionsform" class="form-inline">
        <el-form-item>
          <el-input
            v-model="conditionsform.keywords"
            placeholder="输入关键字"
          ></el-input>
        </el-form-item>
        <el-form-item label="提交时间">
          <el-date-picker
            v-model="conditionsform.conditiontime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">筛选</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div id="feedback">
      <div id="feedback-head">
        <i class="el-icon-edit"></i>
        <span>意见表</span>
      </div>
      <el-table
        id="feedback-table"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column
          prop="fdbkType"
          label="意见类型"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="content"
          label="意见内容"
          width="350"
        ></el-table-column>
        <el-table-column
          prop="submitter"
          label="提交人"
          width="150"
        ></el-table-column>
        <el-table-column prop="submittime" label="日期" width="200">
          <!--<template slot-scope="scope">{{ scope.row.date }}</template>-->
        </el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button size="small" @click="toggleSelection()">取消选择</el-button>
        <el-button size="small" type="danger" @click="multipleDelete()"
          >批量删除</el-button
        >
        <el-pagination
          id="page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageParams.pageIndex"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pageParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Feedback",
  data() {
    return {
      conditionsform: {
        keywords: "",
        conditiontime: [],
      },
      tableData: [],
      pageTotal: 0,
      pageParams: {
        pageIndex: 1,
        pageSize: 2,
      },
      feedbackDTO: {
        pageIndex: 1,
        pageSize: 2,
        keywords: "",
        beginTime: "",
        endTime: "",
      },
      multipleSelection: [],
    };
  },
  created() {
    this.pagehelper();
  },
  methods: {
    //筛选查询
    onSubmit() {
      //console.log(this.conditionsform.keywords);
      //console.log(this.conditionsform.conditiontime[0]);
      //console.log(this.conditionsform.conditiontime[1]);
      (this.feedbackDTO.keywords = this.conditionsform.keywords),
        (this.feedbackDTO.beginTime = this.conditionsform.conditiontime[0]),
        (this.feedbackDTO.endTime = this.conditionsform.conditiontime[1]);
      this.$axios
        .post("/feedback/getSelected", this.feedbackDTO)
        .then((res) => {
          //console.log(res.data);
          res.data.data.list.forEach((data) => {
            if (data.fdbkType === 0) {
              data.fdbkType = "产品功能";
            } else if (data.fdbkType === 1) {
              data.fdbkType = "产品体验";
            }
            if (data.fdbkType === 2) {
              data.fdbkType = "其他问题";
            }
          });
          this.tableData = res.data.data.list;
          this.pageTotal = res.data.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    //删除当前行数据
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除当前行数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //console.log("删一条！");
          this.$axios
            .get("/feedback/deleteOne", {
              params: {
                id: row.id,
              },
            })
            .then((res) => {
              //console.log(res.data);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch(() => {
          console.log("不删了！");
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //批量删除
    multipleDelete() {
      console.log(this.multipleSelection);
      let temp = [];
      this.multipleSelection.forEach((data) => {
        temp.push(data.id);
      });
      console.log(temp);
      this.$confirm("此操作将永久删除选中行的数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          this.$axios
            .post("/feedback/multiDelete", temp)
            .then((res) => {
                this.$message({
                type: "success",
                message: "删除成功",
          });
            });
        }).catch(() => {
          console.log("不删了！");
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //改变每页显示条数
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.pageParams.pageSize = val;
      if (
        this.feedbackDTO.keywords != null ||
        this.feedbackDTO.beginTime != null ||
        this.feedbackDTO.endTime != null
      ) {
        (this.feedbackDTO.pageIndex = this.pageParams.pageIndex),
          (this.feedbackDTO.pageSize = this.pageParams.pageSize);
        this.onSubmit();
      } else {
        this.pagehelper();
      }
    },

    //改变当前页
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.pageParams.pageIndex = val;
      if (
        this.feedbackDTO.keywords != null ||
        this.feedbackDTO.beginTime != null ||
        this.feedbackDTO.endTime != null
      ) {
        (this.feedbackDTO.pageIndex = this.pageParams.pageIndex),
          (this.feedbackDTO.pageSize = this.pageParams.pageSize);
        this.onSubmit();
      } else {
        this.pagehelper();
      }
    },

    //查询所有数据的分页
    pagehelper() {
      this.$axios
        .get("/feedback/getAll", {
          params: {
            pageIndex: this.pageParams.pageIndex,
            pageSize: this.pageParams.pageSize,
          },
        })
        .then((res) => {
          //console.log(res.data);
          res.data.data.list.forEach((data) => {
            if (data.fdbkType === 0) {
              data.fdbkType = "产品功能";
            } else if (data.fdbkType === 1) {
              data.fdbkType = "产品体验";
            } else if (data.fdbkType === 2) {
              data.fdbkType = "其他问题";
            }
          });
          this.tableData = res.data.data.list;
          this.pageTotal = res.data.data.total;
        });
    },
  },
};
</script>

<style>
#title {
  font-size: 25px;
  font-weight: bolder;
}
#conditions {
  margin-top: 15px;
  border-color: lightgray;
  border-width: thin;
  border-style: solid;
  width: 1000px;
  height: 180px;
}
#conditions-head {
  background-color: #f2f2f2;
  height: 50px;
  font-size: 20px;
}
.el-icon-search {
  margin-left: 10px;
  margin-top: 15px;
}
.form-inline {
  margin-top: 40px;
  margin-left: 90px;
}
#feedback {
  margin-top: 15px;
  border-color: lightgray;
  border-width: thin;
  border-style: solid;
  width: 1000px;
  height: 1000px;
}
#feedback-head {
  background-color: #f2f2f2;
  height: 50px;
  font-size: 20px;
}
.el-icon-edit {
  margin-left: 10px;
  margin-top: 15px;
}
#page {
  float: right;
}
</style>